<!--
*
*个人中心
*
 -->
<template>
  <div class="bg-content">
    <div class="card">
      <div class="card-top">
        <div class="info" @click="gologin()">
          <div class="info-left">
            <img src="../../assets/img/main/user.png" alt="" />
          </div>
          <div v-if="name" class="info-username">{{ name }}</div>
        </div>
      </div>
    </div>
    <div class="list">
      <ul>
        <li v-for="(item, index) in list" :key="index" @click="getDetail(item)">
          <div class="left">
            <div class="icon">
              <img :src="item.icon" class="icon" alt="" />
            </div>
            <span> {{ item.text }}</span>
          </div>
          <div class="right">
            <van-icon name="arrow" size="18px" />
          </div>
        </li>
      </ul>
    </div>
    <div class="outlogin" @click="outlogin()">
      <ul>
        退出登录
      </ul>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Cell, Icon, Toast, Dialog } from "vant";
import { loginPhoneApi, getUserinfoApi } from "@/service/api.js";
import { loginByWxOpenidApi } from "@/service/api.js";

Vue.use(Cell);
Vue.use(Icon);
export default {
  name: "mine",
  inject: ["reload"],

  data() {
    return {
      code: "333",
      apiList: "",
      name: "",
      userInfo: "",
      token: "",
      apptoken: "",
      openid: "",
      apptoken: "",
      list: [
        {
          icon: require("../../assets/img/main/003.png"),
          text: "我的医生",

          url: "/sc_doctor"
        },
        {
          icon: require("../../assets/img/main/002.png"),
          text: "常用就诊人",
          url: "/se_doctor"
        },
        {
          icon: require("../../assets/img/main/004.png"),
          text: "常见问题",
          url: "/help"
        },
        // {
        //   icon: require("../../assets/img/main/005.png"),
        //   text: "意见反馈",
        //   // url: "/fk_suggestion",
        // },
        {
          icon: require("../../assets/img/main/more.png"),
          text: "更多",
          url: ""
        }
      ]
    };
  },
  created() {
    (this.apptoken = JSON.parse(localStorage.getItem("apptoken"))),
      localStorage.setItem("apptoken1", this.apptoken);
    // 拿取token
    this.token = localStorage.getItem("token");
    console.log(this.token);
    this.getuserinfo();
  },
  mounted() {
    // 如果支持 popstate 一般移动端都支持了
    if (window.history && window.history.pushState) {
      // 往历史记录里面添加一条新的当前页面的url
      history.pushState(null, null, document.URL);
      // 给 popstate 绑定一个方法 监听页面刷新
      window.addEventListener("popstate", this.backChange, false); //false阻止默认事件
    }
  },
  // BBBB.vue
  destroyed() {
    window.removeEventListener("popstate", this.backChange, false); //false阻止默认事件
  },
  methods: {
    outlogin() {
      window.localStorage.removeItem("token");
      this.$router.go(-1);
    },
    backChange() {
      const that = this;
      console.log("监听到了");
      this.$router.push({
        name: "Home"
      });
    },
    // 判断code
    // getcode() {
    //   if (this.code) {
    //     console.log("获取code成功!");
    //     // 2. 给后台发送请求,并携带code,后台可以通过code和appsecret去微信服务器换取access_token
    //     //     2.1 拉取用户信息(需scope为 snsapi_userinfo)这个操作依赖于access_token和openid 这个后台处理了
    //     console.log(this.code);
    //     console.log(111);
    //   } else {
    //     console.log(this.code);
    // window.location.href = userInfo_url;
    //   }
    // },
    // 获取用户信息
    getuserinfo() {
      let apptoken = JSON.parse(localStorage.getItem("apptoken"));
      console.log(this.apptoken);
      getUserinfoApi({
        token: this.token,
        apptoken: apptoken
      }).then(res => {
        // console.log(res)
        if (res.code == 4000) {
          console.log(res);
          this.name = res.data.loginPhone;
        } else {
          if (res.code == 4002) {
            window.localStorage.removeItem("token");
            Dialog.confirm({
              title: "提示",
              message: "需前往登录页面完成登录"
            })
              .then(() => {
                this.$router.push({
                  name: "login"
                });
                // on confirm
              })
              .catch(() => {
                // on cancel
              });
          }
        }
      });
    },

    gologin() {
      console.log(this.token);
      if (this.token) {
        console.log(222);
      } else {
        this.$router.push({
          name: "login"
        });
      }
    },

    getDetail(val) {
      window.localStorage.removeItem("choose");
      console.log(val);
      if (val.url && this.token) {
        this.$router.push({ path: val.url });
      } else {
        Toast("功能暂未开放");
      }
    },
    getData() {
      // console.log();
      // loginPhoneApi().then((res)=>{
      //   // console.log(res);
      // })
    }
  }
};
</script>
<style scoped lang="scss">
.bg-content {
  background: #f6f6f6;
  .outlogin {
    width: 100%;
    text-align: center;
    margin-top: 0.2rem;
    color: #07c6b4;
    font-size: 0.4rem;
    text-decoration: underline;
    margin-bottom: 0.2rem;
  }
}
.card-top {
  width: 100%;
  height: 4rem;
  background: linear-gradient(-50deg, #07c6b4 0%, #47dbcd 100%);
  .info {
    display: flex;
    align-items: center;
    padding-top: 1.3rem;
    margin-left: 0.3rem;
    .info-left {
      width: 1.5rem;
      height: 1.5rem;
      background: #ffffff;
      border-radius: 50%;
      text-align: center;
      img {
        width: 0.8rem;
        height: 0.8rem;
        margin-top: 0.3rem;
      }
    }
    .info-username {
      overflow: hidden;
      margin-left: 0.2rem;
      font-size: 0.4rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
    }
  }
}
.list {
  background: #ffffff;
  margin-top: 0.3rem;
  ul {
    padding: 0 0.1rem;
    li {
      width: 100%;
      height: 1.4rem;
      border-bottom: 1px solid #f1f1f1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        .icon {
          width: 0.8rem;
          height: 0.8rem;
        }
        span {
          margin-left: 0.2rem;
        }
        font-size: 0.4rem;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #000000;
        display: flex;
        align-items: center;
      }
      .right {
        color: #999999;
      }
    }
  }
}
</style>
